import { defineComponent, onUnmounted, reactive,ref } from 'vue'
import Draw from './flowDraw'

export default defineComponent({
  components: {
    Draw,
  },
  setup() {
    let intervalInstance = null
    const cdata = reactive({
      // nodes:[
      //   {
      //     id: 'illegal_node_sj2',
      //     name: '登录系统',
      //     x: 50,
      //     y: 500,
      //     nexts: [
      //       { next: 'illegal_node_wfqr', name: '' },
      //     ],
      //   },
      //   {
      //     id: 'illegal_0',
      //     name: '否',
      //     x: 900,
      //     y: 900,
      //     nexts: [
      //       { next: null, name: '' },
      //     ],
      //   },
      //   {
      //     id: 'illegal_node_wfqr',
      //     name: '提交请假申请',
      //     x: 240,
      //     y: 500,
      //     nexts: [
      //       { next: 'illegal_node_xzcf', name: '' },
      //     ],
      //   },
      //   {
      //     id: 'illegal_node_xzcf',
      //     name: '学科老师审批',
      //     x: 340,
      //     y: 500,
      //     nexts: [
      //       { next: 'illegal_node_zx', name: '' }
      //     ],
      //   },
      //   {
      //     id: 'illegal_node_zx',
      //     name: '是否通过审批',
      //     x: 440,
      //     y: 500,
      //     nexts: [
      //       { next: 'illegal_node_fy', name: '是' },
      //       { next: 'illegal_0', name: '' },
      //     ],
      //   },
      //   {
      //     id: 'illegal_node_fy',
      //     name: '填写在门卫管理平台上',
      //     x: 540,
      //     y: 500,
      //     nexts: [
      //       { next: 'illegal_node_ja', name: '' },
      //     ],
      //   },
      //   {
      //     id: 'illegal_node_ja',
      //     name: '门卫放行',
      //     x: 700,
      //     y: 500,
      //     nexts: [
      //       { next: null , name: '' },
      //     ],
      //   },
      //   { id: null, name: '结束', x: 900, y: 500, nexts: [] },
      // ],
      data:[
        {
          name: '登录系统',
          x: 300,
          y: 300
        },
        {
          name: '提交请假申请',
          x: 400,
          y: 300
        },
        {
          name: '学科老师审批',
          x: 500,
          y: 300
        },
        {
          name: '是否通过审批',
          x: 600,
          y: 300
        },
        {
          name: '门卫管理平台登记',
          x: 700,
          y: 300
        },
        {
          name: '门卫放行',
          x: 800,
          y: 300
        },
        {
          name: '结束',
          x: 900,
          y: 300
        },
      ],
      links:[
        {
          source: '是否通过审批',
          target: '结束',
          symbolSize: [10, 10],
          label: {
            show: true,
            formatter: '否',
          },
          lineStyle: {
            width: 2,
            curveness: 0.4
          }
        },
        // {
        //   source: 'Node 2',
        //   target: 'Node 1',
        //   label: {
        //     show: true
        //   },
        //   lineStyle: {
        //     curveness: 0.2
        //   }
        // },
        {
          source: '登录系统',
          target: '提交请假申请'
        },
        {
          source: '提交请假申请',
          target: '学科老师审批'
        },
        {
          source: '学科老师审批',
          target: '是否通过审批'
        },
        {
          source: '是否通过审批',
          target: '门卫管理平台登记',
          symbolSize: [10, 10],
          label: {
            show: true,
            formatter: '是',
          },
          lineStyle: {
            width: 2,
          }
        },
        {
          source: '门卫管理平台登记',
          target: '门卫放行'
        },
        {
          source: '门卫放行',
          target: '结束'
        }
      ],
      index :0,
    })

    
    intervalInstance = setInterval(() => {
      cdata.index += 1
    }, 2000)

    onUnmounted(() => {
      clearInterval(intervalInstance)
    })
    return () => {
      return (
        <div>
          <Draw cdata={cdata} />
        </div>
      )
    }
  },
})
